<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Ajax 02 Page</h1>
        <fieldset>
            <legend>Ajax 表单请求</legend>
            <form enctype="application/x-www-form-urlencoded">
                <input id="name" type="text" name="name" onblur="doCheck()"/>
                <button type="button" onclick="doSave()">Save</button>
            </form>
            <span id="result"></span>
        </fieldset>
    </div>
    <script>
        function doCheck() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                 document.getElementById("result").innerHTML = xhr.responseText;
                }
            }
            let name = document.forms[0].name.value;
            let url = `http://localhost/doCheck?name=${name}`;
            xhr.open("get",url,true);
            xhr.send(null);
        }

        function doSave() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("result").innerHTML = xhr.responseText;
                }
            }
            let name = document.forms[0].name.value;
            let url = "http://localhost/doSave";
            xhr.open("post",url,true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(`name=${name}`);
        }
    </script>
</body>
</html>